<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
  <div class="gauge-chart" ref="chartRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必要的组件
echarts.use([GaugeChart, CanvasRenderer])

const props = defineProps({
  score: {
    type: Number,
    required: true,
    default: 0
  },
  color: {
    type: String,
    default: '#67C23A'
  }
})

const chartRef = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  // 创建图表实例
  chartInstance = echarts.init(chartRef.value)
  
  // 更新图表
  updateChart()
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', handleResize)
}

// 更新图表
const updateChart = () => {
  if (!chartInstance) return
  
  // 获取评分等级
  const level = getLevel(props.score)
  
  // 仪表盘配置
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '75%'],
        radius: '90%',
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.3, '#F56C6C'],
              [0.7, '#E6A23C'],
              [1, props.color]
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 8,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 6,
          distance: -15,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: '#fff',
            width: 3
          }
        },
        axisLabel: {
          distance: -40,
          color: '#999',
          fontSize: 10
        },
        detail: {
          valueAnimation: true,
          formatter: `{value}分\n${level}`,
          color: 'inherit',
          fontSize: 16,
          fontWeight: 'bold',
          offsetCenter: [0, '-20%']
        },
        data: [
          {
            value: props.score,
            name: '',
            title: {
              offsetCenter: ['0%', '-60%']
            },
            itemStyle: {
              color: getColorForScore(props.score)
            }
          }
        ]
      }
    ]
  }
  
  // 设置图表选项
  chartInstance.setOption(option)
}

// 根据分数获取颜色
const getColorForScore = (score: number) => {
  if (score >= 70) {
    return '#67C23A'
  } else if (score >= 50) {
    return '#E6A23C'
  } else {
    return '#F56C6C'
  }
}

// 根据分数获取等级文字
const getLevel = (score: number) => {
  if (score >= 80) {
    return '优秀'
  } else if (score >= 70) {
    return '良好'
  } else if (score >= 60) {
    return '正常'
  } else if (score >= 50) {
    return '警告'
  } else {
    return '风险'
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 监听 props 变化
watch(
  () => [props.score, props.color],
  () => {
    if (chartInstance) {
      updateChart()
    }
  }
)

// 组件挂载时初始化图表
onMounted(() => {
  initChart()
})

// 组件销毁前清理资源
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.gauge-chart {
  width: 100%;
  height: 100%;
}
</style> 